<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_全屏遮罩</title>
    <style>
        .mask {
            /* 第一种方法
            background-color: rgba(0, 0, 0, .3);
            position: fixed;
            width: 500px;
            height: 400px;
            width: 100vw;
            height: 100vh;*/

            /* 第二种方法 */
            background-color: rgba(0, 0, 0, .3);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>

<div class="mask"></div>
<div class="main"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores aut enim, eos est fuga inventore iure,
    iusto modi numquam obcaecati optio quisquam ratione reprehenderit soluta ullam vel velit voluptates!
</div>
<div>Doloremque maxime recusandae saepe sed voluptatibus! Aliquam at consectetur, dolore dolores, dolorum eius, eligendi
    esse excepturi maxime non obcaecati optio sed voluptatem? Dolorum, ducimus minus nobis odit perferendis possimus
    quam.
</div>
<div>Deserunt mollitia ratione repellendus? Adipisci aliquam, assumenda at consectetur consequuntur cumque debitis
    doloribus itaque libero nesciunt perferendis quas quis quos saepe tempore totam voluptatem. Autem enim maxime
    perferendis sapiente. Quam.
</div>
<div>Aspernatur corporis ducimus eaque eligendi exercitationem in perferendis similique. Accusamus alias atque beatae
    consequatur, deleniti deserunt doloremque doloribus ea ex labore molestias natus obcaecati perferendis ratione
    suscipit vero vitae voluptatibus?
</div>
<div>Alias aliquid atque aut blanditiis commodi consequuntur debitis dolorum eveniet illo impedit iusto modi molestiae
    molestias nesciunt obcaecati odit optio pariatur perferendis, qui quisquam quod repellendus sed sequi veniam
    veritatis?
</div>
<div>Aspernatur delectus eligendi eos expedita fugiat ipsam numquam possimus quia suscipit, ut. Deleniti, laborum,
    possimus. Accusamus deserunt ducimus facere fugiat, hic itaque mollitia porro repellendus sed. Eligendi excepturi
    praesentium repellat?
</div>
<div>Explicabo id in molestias nemo officiis? Adipisci corporis deserunt doloribus eius, ex fugit harum illum laudantium
    maiores nihil obcaecati omnis quas quasi quia quod repellat reprehenderit sed sint sit totam.
</div>
<div>Accusantium aliquid architecto asperiores cupiditate dignissimos dolor dolore dolorum ea earum impedit inventore
    iusto laudantium minima nostrum pariatur placeat praesentium, qui quisquam quo rem sint soluta tempore! Delectus,
    quaerat, quas.
</div>
<div>Accusantium adipisci alias aliquam aperiam at consequuntur, culpa dolor dolorem eveniet, excepturi id, iusto
    officiis quasi quis sequi tempore totam velit! Corporis eveniet, iste labore magnam natus quasi repellendus sequi?
</div>
<div>Amet aut delectus libero nobis optio, quae quos! A accusantium asperiores aspernatur cumque doloremque dolores enim
    fuga id ipsa iste, magni modi molestiae nihil, quibusdam quidem quos repudiandae voluptatem voluptates?
</div>
<div>Accusantium, esse laboriosam. Dolorum explicabo ipsam modi nihil possimus provident quisquam totam. Ab adipisci
    officia sint. Asperiores dolorem doloribus eaque est illo, ipsa ipsam pariatur quae similique sint tempore
    voluptatem?
</div>
<div>Asperiores consectetur culpa cupiditate esse, eveniet hic incidunt iure iusto nisi nobis perspiciatis placeat quo,
    quos rem vel vero voluptas? Ab fugiat reprehenderit voluptatibus? Accusamus aliquid ipsam neque nesciunt quasi.
</div>
<div>Animi assumenda eius voluptas? Cumque illo ipsum nam quis soluta suscipit, tempore. Cum exercitationem fugiat,
    illum numquam quam sapiente ullam. Aliquid atque delectus esse et magni minima perspiciatis quos suscipit.
</div>
<div>Alias earum enim hic laudantium natus nemo ullam, vitae? Dolor dolore dolorem doloremque dolores fugiat magni
    minus, numquam possimus quae, quam quibusdam quidem quod saepe veritatis voluptatibus. Accusantium, quisquam, sint.
</div>
<div>Accusamus consectetur dignissimos dolores, labore maiores neque nostrum omnis quia sint tempora. Aliquam, nam,
    repudiandae. Aspernatur dolore dolorem dolorum et hic id impedit laboriosam quas tempore, totam vero voluptatibus.
    Sequi!
</div>
<div>Atque dolor inventore ipsam itaque modi officia quidem quos, repudiandae sunt velit. Esse maiores minima quasi.
    Amet consequuntur corporis culpa illo itaque nostrum possimus ratione vel. Aliquid deleniti eligendi libero.
</div>
<div>Asperiores corporis dolore eos eveniet explicabo facilis fugit iusto modi, neque quae, quaerat quam quo. Beatae
    delectus dicta fuga illo iusto laboriosam libero maiores odit optio ratione, tempora tenetur ullam.
</div>
<div>Cupiditate, ducimus, optio. Aliquid architecto aspernatur atque dolorum eaque eum ex, exercitationem fuga harum in
    ipsam iure libero maiores minus mollitia nemo nobis, odio perferendis porro quae repudiandae voluptate voluptates.
</div>
<div>Accusantium amet assumenda aut cupiditate dolore dolorum, eius eligendi id molestiae, quae reprehenderit soluta
    sunt vero. Cum error minus nostrum optio similique suscipit? Laborum neque odio quibusdam quis. Maiores, sint.
</div>
<div>Adipisci aperiam consectetur corporis delectus dicta est et eveniet illo illum impedit iure minus, nulla quisquam,
    quod repellendus sed ut veritatis voluptatibus? Beatae eum illum omnis quaerat quidem, sapiente suscipit?
</div>
<div>A amet aut consectetur consequatur debitis delectus dolore dolores error illo, iusto maiores non officiis omnis
    perspiciatis quas quia quod reiciendis rem reprehenderit temporibus totam ullam veritatis vitae voluptas voluptates?
</div>
<div>Aliquam animi aut dicta dolores doloribus dolorum exercitationem hic inventore ipsum iste magnam molestias nemo
    nobis numquam placeat, quo recusandae repellendus saepe, temporibus vel velit vitae voluptatum. Aliquid deleniti,
    velit.
</div>
<div>Beatae eius illum in incidunt, ipsum nisi porro praesentium qui reiciendis unde! Animi aperiam consectetur fuga
    itaque molestiae officiis sit totam ullam voluptatum. Eius, maxime quod repudiandae voluptates voluptatibus
    voluptatum.
</div>
<div>Adipisci aliquid consectetur corporis debitis dolorum exercitationem fugit id in labore, nobis obcaecati odit optio
    possimus quae quia! Corporis eos eum illum, molestiae non perspiciatis repellat ullam. Illo, qui, sit?
</div>
<div>Aliquam animi cupiditate dignissimos dolore doloremque error excepturi facilis hic incidunt ipsam iste, iure libero
    minima minus nam natus nesciunt officiis, pariatur perspiciatis praesentium quas quo quod quos ut veniam?
</div>
<div>Culpa cum deserunt, dolor, dolorem doloremque ea eos et facere illum ipsam itaque, maxime minus nisi optio pariatur
    rem repellendus repudiandae sapiente sequi sit tenetur ullam voluptates! Obcaecati, perferendis quas.
</div>
<div>A ad adipisci aliquam amet, beatae culpa delectus distinctio eligendi exercitationem fuga inventore ipsum laborum
    maiores minus molestias numquam odio officia provident quam quod repellendus sunt ut vel? Minus, sed?
</div>
<div>Ab ad aperiam distinctio error est, ex exercitationem fugit incidunt inventore rerum saepe ullam ut vel veniam
    voluptatibus. Aliquid eligendi eos esse est ipsa nam officia quidem quis saepe similique.
</div>
<div>Fugiat quaerat sed veritatis. Aut beatae consectetur corporis deleniti deserunt dignissimos dolorem ducimus eum
    itaque laudantium maxime, natus omnis possimus provident repellendus sint, tenetur veritatis. Dicta laboriosam
    officia ut veniam.
</div>
<div>Alias animi autem, blanditiis cumque eos est et exercitationem explicabo fugiat, id illo in ipsam laboriosam libero
    magnam nihil non nostrum nulla, provident quis repellat repudiandae sit tempora ut voluptatum.
</div>
<div>Amet aspernatur aut delectus deserunt dignissimos eligendi est expedita fugiat illum impedit ipsum natus nisi nulla
    perspiciatis quas qui quibusdam quis quisquam recusandae rem sint soluta tempora ullam, unde vitae.
</div>
<div>Accusantium adipisci asperiores aspernatur at aut autem consectetur, consequuntur corporis debitis deleniti
    dignissimos doloremque dolorum eius ex fugit in inventore maiores molestiae optio perspiciatis placeat porro quidem
    rem, sit ullam!
</div>
<div>Autem iusto magnam mollitia nisi nulla optio perspiciatis praesentium tempora! A ab asperiores, at atque blanditiis
    consectetur distinctio facilis fuga incidunt inventore mollitia natus, qui quod rerum similique, tempore totam!
</div>
<div>A, accusantium assumenda beatae, consequuntur eius enim error est minus nemo nobis obcaecati officiis quia
    repudiandae similique veniam. Aliquid animi culpa distinctio ex facilis id ipsa maxime repellat reprehenderit
    similique?
</div>
<div>Ab at blanditiis deserunt earum explicabo itaque, labore natus neque nesciunt nisi non obcaecati officiis omnis
    pariatur perferendis quod ratione soluta vero. Ab doloremque eveniet fugiat modi nam quae quia.
</div>
<div>Cum cumque dicta ducimus eaque eligendi facilis harum illo ipsum iure laborum laudantium, libero nam necessitatibus
    neque nisi nulla odit placeat quasi quod repellat repellendus similique sit ut veniam vero.
</div>
<div>Atque cumque deserunt eaque earum error esse eum iure necessitatibus nulla, numquam perferendis, praesentium quis
    repellat soluta tenetur! Facere in laboriosam temporibus voluptate. Distinctio, nemo, nihil! Dolores necessitatibus
    voluptates voluptatum!
</div>
<div>Ab accusantium animi, architecto autem beatae deleniti est et ex exercitationem illum ipsum maiores maxime
    molestiae molestias neque nostrum odit optio, porro quos sed temporibus totam ullam veniam veritatis vitae.
</div>
<div>Adipisci cum minima odit quae repellat reprehenderit voluptates! Ad, dolor dolores inventore magni nam qui rerum?
    Eaque explicabo hic, incidunt laborum nobis placeat quisquam quo repellat reprehenderit rerum velit voluptatum.
</div>
<div>Adipisci autem consequuntur deserunt dignissimos ea harum iste iure iusto magnam minus molestiae natus neque non
    nulla optio placeat quia quis, rerum sequi tempore tenetur veniam vitae? Eaque, quibusdam vel?
</div>
<div>Earum hic perspiciatis veritatis. Alias, dolor, impedit? Animi minima nulla porro tempora voluptatum. Aliquid
    aspernatur dolor eum explicabo fugit inventore nihil reiciendis vel? Blanditiis commodi culpa deserunt error iure
    voluptatem.
</div>
<div>Beatae distinctio ducimus ea enim expedita nam necessitatibus porro sequi voluptas voluptate. Autem doloremque
    ducimus earum et illo incidunt molestias mollitia quisquam sequi, sit. Animi corporis est magnam placeat quam!
</div>
<div>Distinctio neque nostrum porro saepe sint temporibus voluptatem. Doloremque ea eveniet itaque, laboriosam magni
    nesciunt omnis porro qui tempora vero? A deleniti, est ex facere id nemo nulla officiis quae!
</div>
<div>Aliquam consequatur, dolore dolorum illo molestiae pariatur repellat! Animi assumenda autem consequatur debitis,
    delectus dicta doloribus fugiat labore maiores, maxime modi nemo nesciunt nihil officia porro rem sit unde voluptas.
</div>
<div>Aliquid autem debitis, deserunt facilis neque obcaecati placeat repudiandae ut. Accusantium assumenda dolorum eaque
    error ex excepturi impedit, incidunt odio odit optio quae quo similique voluptas! Aspernatur sunt ut vero!
</div>
<div>Amet asperiores assumenda aut, consequatur debitis dicta dignissimos ea earum illo, laboriosam minus modi, natus
    quisquam recusandae rerum voluptate voluptates voluptatibus. Aspernatur assumenda debitis dolor error labore
    obcaecati quos voluptas.
</div>
<div>Animi dolorum est ipsa! Accusantium consectetur consequatur dolorem et explicabo hic illo molestias quidem! Beatae
    consequuntur distinctio est expedita explicabo id ipsam itaque iusto libero magnam maiores odit porro, sint?
</div>
<div>Architecto aut consectetur corporis dicta enim est explicabo facilis laborum magni minus mollitia neque nobis nulla
    odit quaerat, quod ratione reprehenderit saepe sit tempora tenetur ut vel voluptatem. Illo, perspiciatis?
</div>
<div>Aut consequatur consequuntur cumque, nobis perspiciatis quam ratione sit voluptate! Asperiores atque explicabo iure
    officia, placeat repellendus. Culpa in ipsum numquam quos repellat. Esse reiciendis sapiente sint? Dolor, fugiat,
    odio.
</div>
<div>Ea eligendi inventore nesciunt perferendis reiciendis saepe suscipit tenetur ut veniam voluptas? Architecto
    consequatur deserunt dolor impedit nulla sed sint voluptas? Accusantium, consectetur consequuntur distinctio maiores
    omnis possimus reiciendis voluptate.
</div>
<div>A at et eum fugiat hic odio odit reiciendis sapiente tempore! Ducimus eius, eligendi ex explicabo illo illum ipsa
    iusto nam neque nisi, non rem saepe, sequi temporibus veritatis voluptas?
</div>
<div>A adipisci amet animi blanditiis corporis, cum deleniti doloremque dolores doloribus esse exercitationem explicabo
    illo illum ipsum iusto laboriosam libero maxime modi mollitia nesciunt non quo soluta tempora tenetur voluptate!
</div>
<div>Assumenda consectetur cum ducimus harum impedit labore officiis quasi quibusdam recusandae sunt. Consequatur,
    cumque, deserunt eius ex exercitationem, ipsa ipsum iure labore maxime odit perspiciatis quo ullam ut. Hic, unde.
</div>
<div>Assumenda commodi, corporis distinctio harum itaque minima, numquam placeat possimus quasi quibusdam tempora vero.
    Accusantium aperiam eum quo sapiente veritatis? Dicta dolore doloribus expedita fugiat laudantium minus, mollitia
    repellendus voluptatum!
</div>
<div>Dolorem ducimus explicabo ipsam labore laboriosam maxime placeat quaerat, quia quod? Ad iure neque quos vitae
    voluptatibus? Dolore doloribus ducimus est labore minima nihil odit praesentium quia similique veniam? Aspernatur.
</div>
<div>Commodi deleniti eius iusto magnam odit officia quas, sint? Aliquid aperiam asperiores assumenda blanditiis
    delectus eligendi exercitationem in ipsam laboriosam necessitatibus perferendis, porro quis quod recusandae,
    suscipit totam vel veniam.
</div>
<div>A atque, beatae, consectetur distinctio ea esse eveniet exercitationem id molestias neque non nulla numquam odio
    officia perferendis rem ullam? Ad aut earum eveniet nam omnis pariatur quaerat quibusdam vero.
</div>
<div>Amet at dolorum ea eaque laboriosam, laudantium libero, magni minus, pariatur quae quasi veniam veritatis!
    Accusamus est, ipsam laudantium magnam modi, nobis officia quo, ratione soluta suscipit tenetur unde vero!
</div>
<div>Adipisci alias aperiam aut commodi cumque cupiditate dignissimos dolore ducimus eos eveniet, explicabo facilis
    impedit ipsam maxime, minus modi nam, natus perferendis porro quaerat quod recusandae rem reprehenderit voluptate
    voluptatem?
</div>
<div>Beatae debitis natus sapiente? Architecto, atque cupiditate fugiat ipsum iusto magni nisi numquam temporibus
    tenetur? A aliquam debitis iusto molestiae sunt? Accusantium ex expedita fugiat modi nisi, non omnis quis?
</div>


</body>
</html>